<template>
	<view class="video-list">
		<view class="swiper-box">
			<swiper class="swiper" vertical="false" @change="slider">
				<swiper-item v-for="(item,index) in videos" :key="index">
					<video-player ref="players" :video="item" :index="index" @follow="follow"></video-player>
					<view class="left-box">
						<!--将左侧信息栏组件放到<swiper-item>中同视频一起渲染出来-->
						<list-left></list-left>
					</view>
					<view class="right-box">
						<list-right ref="listRight"></list-right>
						<!--将左侧信息栏组件放到<swiper-item>中同视频一起渲染出来-->
						<!-- <list-right></list-right> -->
					</view>
					<!-- <view class="swiper-item">{{item.id}}</view> -->
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import ListLeft from './list-left.vue'
	import VideoPlayer from './video-play.vue'
	import Right from './list-right.vue'

	export default {
		props: ['list'],
		data() {
			return {
				videos: [],
				currentPage: 0
			}
		},
		components: {
			"video-player": VideoPlayer,
			"list-left": ListLeft,
			"list-right": Right
		},
		methods: {
			follow() {
				this.$refs.listRight[0].follow();
			},
			slider(e) {
				console.log(e)
				let targetPage = e.detail.current;
				if (targetPage === this.currentPage + 1) {
					console.log('向上滑动')
					this.$refs.players[this.currentPage].pause();
					this.$refs.players[targetPage].playFromHead();
				} else if (targetPage === this.currentPage - 1) {
					console.log("向下滑动")
					this.$refs.players[this.currentPage].pause();
					this.$refs.players[targetPage].playFromHead();
				}
				this.currentPage = targetPage;

			}
		},
		watch: {
			list() {
				this.videos = this.list;
			}
		}
	}
</script>

<style scoped>
	.video-list {
		width: 100%;
		height: 100%;
	}

	.swiper-box {
		height: 100%;
		width: 100%;
	}

	.swiper {
		height: 100%;
		width: 100%;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		background: red;
	}

	.left-box {
		position: absolute;
		bottom: 50px;
		left: 10px;
		z-index: 20;
	}

	.right-box {
		position: absolute;
		bottom: 50px;
		right: 10px;
		/* 		height: 50px; */
		/* 	border: 2px solid red; */
		z-index: 21;
	}
</style>
